<template>
  <div>
    <!-- 导航提示信息 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>模拟考试管理</el-breadcrumb-item>
      <el-breadcrumb-item>模拟考试</el-breadcrumb-item>
    </el-breadcrumb>
    <br />

    <!-- 模糊查询表单 -->
    <el-row>
      <el-col :span="14">
        <template>
          <el-form :inline="true" :model="samplePage" class="demo-form-inline">
            <el-form-item label="编号">
              <el-input v-model="samplePage.sampleId" placeholder="编号" style="width: 140px;"></el-input>
            </el-form-item>
            <el-form-item label="模拟试卷名">
              <el-input v-model="samplePage.sampleTitle" placeholder="模拟试卷名称"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="loadData">查询</el-button>
            </el-form-item>
          </el-form>
        </template>
      </el-col>
      <!-- <el-col>
      </el-col> -->
      <el-col :span="8">
        <template>
          <el-row>

            <el-button icon="el-icon-time" type="primary" size="medium" round @click="randGenerateWin()">添加模拟试卷
            </el-button>

          </el-row>
        </template>
        <br>
      </el-col>
    </el-row>

    <!-- 表格数据展示 -->
    <template>
      <el-table :data="sampleList" style="width: 100%" :row-class-name="tableRowClassName" max-height="350">
        <el-table-column fixed="left" label="编号" width="200">
          <template slot-scope="x">
            <span style="margin-left: 10px">{{ x.row.sampleId }}</span>
          </template>
        </el-table-column>

        <el-table-column label="模拟试卷名" width="400">
          <template slot-scope="x">
            <span>{{x.row.sampleTitle}}</span>
          </template>
        </el-table-column>

        <el-table-column label="创建时间" width="400">
          <template slot-scope="x">
            <span>{{x.row.sampleCreatetime}}</span>
          </template>
        </el-table-column>

        <el-table-column label="满分" width="250">
          <template slot-scope="x">
            <span>{{x.row.sampleFullscore}}</span>
          </template>
        </el-table-column>

        <el-table-column fixed="right" label="操作" width="250">
          <template slot-scope="scope">
            <el-button type="success" size="small" round @click="joinExam(scope.$index,scope.row)" plain>
              模拟考试
            </el-button>

            <el-button type="danger" size="small" round @click="deletePaper(scope.$index, scope.row)" plain>
              删除
            </el-button>
          </template>
        </el-table-column>


      </el-table>
      <div class="block">

        <el-pagination @size-change="sizeChange" @current-change="currentChange" :current-page="samplePage.page"
          :page-sizes="[2, 3, 5]" :page-size="samplePage.row" layout="total, sizes, prev, pager, next, jumper"
          :total="samplePage.total">
        </el-pagination>
      </div>
    </template>
    <template>
      <!-- 在线考试模态框 -->
      <el-dialog title="模拟考试" :visible="onsampleVisible" :before-close="closewin" width="80%">
        <!-- @opened="openVideo()" -->
        <div>
          <span style="color: red;font-weight: 400;font-size:400;" id="dddd">00:30:00</span>
          <div id="showVideo"></div>
        </div>
        <!-- 考题信息 -->
        <div>
          <el-form ref="sampleForm" :rules="rules" label-width="100px">
            <div v-for="(item,index) in onSampleList" :key="index">
              <el-form-item>
                <span v-if="item.practiceType == '单选题'">{{index+1}}&nbsp;. (单选题) {{item.practiceTopic}}
                  <br />
                  <el-radio-group v-model="item.stuAnswer" @change="(val) =>changeSingleChoice(val,item.practiceId)">

                    <el-radio label="A">A. {{item.practiceA}}</el-radio>
                    <br />

                    <el-radio label="B">B. {{item.practiceB}}</el-radio>
                    <br />

                    <el-radio label="C">C. {{item.practiceC}}</el-radio>
                    <br />

                    <el-radio label="D">D. {{item.practiceD}}</el-radio>
                    <br />
                    <br>
                    <el-form-item ref="an" prop="answer">
                      <span v-show="show" style="color: red;font-weight: 800;">答案：{{item.practiceAnswer}}</span>
                    </el-form-item>

                  </el-radio-group>
                </span>
                <span v-else-if="item.practiceType == '判断题'">{{index+1}}&nbsp;. (判断题) {{item.practiceTopic}}
                  <br />
                  <el-radio-group v-model="item.stuAnswer" @change="(val) => changeJudge(val, item.practiceId)">
                    <el-radio border size="small" label="√">√</el-radio>
                    <!-- <br/> -->
                    <el-radio border size="small" label="×">×</el-radio>

                    <el-form-item ref="an" prop="answer">
                      <span v-show="show" style="color: red;font-weight: 800;">答案：{{item.practiceAnswer}}</span>
                    </el-form-item>
                  </el-radio-group>
                </span>
              </el-form-item>


            </div>

            <!-- 提交试卷 -->
            <el-form-item>
              <el-row>
                <el-button type="success" round size="medium" @click="change()">查看答案</el-button>

              </el-row>

            </el-form-item>

          </el-form>
        </div>

      </el-dialog>

      <!-- 随机生成试卷 -->
      <el-dialog title="随机生成模拟试卷" :visible="randGenerateVisible" width="28%" :before-close="close">
        <el-form :inline="true" :model="samplePaper" ref="ruleForm" :rules="rules" class="demo-form-inline"
          label-width="120px">
          <el-form-item label="模拟试卷名称" prop="sampleTitle">
            <el-input v-model="samplePaper.sampleTitle" placeholder="模拟试卷名称"></el-input>
          </el-form-item>

          <el-form-item label="单选题" prop="singleNumber">
            <el-input v-model.number="samplePaper.singleNumber" placeholder="单选题个数"></el-input>
          </el-form-item>
          <el-form-item label="判断题" prop="judgeNumber">
            <el-input v-model.number="samplePaper.judgeNumber" placeholder="判断题题个数"></el-input>
          </el-form-item>

          <el-form-item style="align-items: auto;">
            <el-button type="primary" @click="randGeneratePaper('ruleForm')">生成</el-button>
          </el-form-item>

        </el-form>

      </el-dialog>
    </template>
  </div>
</template>

<script>
  export default {
    methods: {
      deleteRow(index, rows) {
        rows.splice(index, 1);
      }
    },
    data() {
      return {
        show: false,
        form: [{
          radioAnswer: "",
          booleanAnswer: "",

        }],

        rules: {
          singleNumber: [{
              required: true,
              message: "请输入单选题个数",
              trigger: 'blur'
            },
            {
              type: "number",
              min: 1,
              max: 9,
              message: "最小 1 最大 9",
              trigger: 'blur'
            }
          ],
          judgeNumber: [{
              required: true,
              message: "请输入判断题个数",
              trigger: 'blur'
            },
            {
              type: "number",
              min: 1,
              max: 9,
              message: "最小 1 最大 9",
              trigger: 'blur'
            }
          ],
          sampleTitle: [{
            required: true,
            message: "请输入试卷名称",
            trigger: 'blur'
          }],
          sampleId: [{
            required: false,
          }, {
            type: "number",
            message: "最小 1 最大 9",
            trigger: 'blur'
          }],

          singleChoice: [{
            required: true,
            message: "请选择",
            trigger: 'change'
          }],
          judge: [{
            required: true,
            message: "请选择",
            trigger: 'change'
          }]
        },
        tableData: [],
        sampleList: [], // 试卷列表
        samplePage: { // 试卷分页
          page: 1,
          row: 3,
          total: 0,
          sampleId: null, // id查询
          sampleTitle: "" // 试卷名称查询
        },
        samplePaper: { // 试卷对象
          sampleId: 0,
          sampleTitle: " ",
          sampleCreateTime: "",
          sampleFullscore: 100,
          subjectId: null,
          examList: []
        },
        practice: { // 题目对象
          practiceId: 0,
          practiceTopic: "",
          practiceCourse: "",
          practiceDifficulty: "",
          practiceA: "",
          practiceB: "",
          practiceC: "",
          practiceD: "",
          practiceScore: 10,
          practiceAnswer: "",
          practiceType: "",
          subjectId: 1
        },
        onsampleVisible: false, // 在线考试模态框
        onSampleList: [],
        // 考生答案
        answerList: [],
        // 试卷编号
        sampleTestId: null,
        // 答案对象
        answerSheet: {
          answerId: null,
          sampleId: null,
          practiceId: null,
          rightAnswer: null,
          stuAnswer: null,
          practiceScore: null,
          answerScore: null,
          stuId: 1,
          answerList: null
        },
        // 随机生出试卷模态框
        randGenerateVisible: false,
      }
    },
    methods: {
      tableRowClassName({
        row,
        rowIndex
      }) {
        if (rowIndex === 1) {
          return 'warning-row';
        } else if (rowIndex === 3) {
          return 'success-row';
        }
        return '';
      },

      change() {
        this.show = !this.show
      },

      loadData() {
        var self = this;
        console.log(JSON.stringify(self.samplePage));
        $.ajax({
          url: "http://localhost:8080/samplepaper/list",
          type: "get",
          data: self.samplePage,
          dataType: "json",
          success: function(rs) {

            self.sampleList = rs.list;
            self.samplePage.total = rs.total;

          },
          error: function(rs) {

          }
        });
      },
      sizeChange(val) {
        this.samplePage.row = val;
        this.loadData();
      },
      currentChange(val) {
        this.samplePage.page = val;
        this.loadData();
      },
      // 关闭所有模态框
      close() {

        this.randGenerateVisible = false;

      },
      closewin() {
        var self = this;
        self.$confirm('是否关闭模拟试题?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.onsampleVisible = false;
          // self.examanationId = 0;
          // 清空答案列表
          let size = self.answerList.length;
          self.answerList.splice(0, size);
        });
      },

      // 随机生成试卷窗口
      randGenerateWin() {
        this.randGenerateVisible = true;


      },
      // 随机生成试卷提交
      randGeneratePaper(formName) {
        // console.log("提交");
        var self = this;
        self.$refs[formName].validate((valid) => {
          if (valid) {

            let sampleNumber = Number.parseInt(self.samplePaper.singleNumber) + Number.parseInt(self.samplePaper
              .judgeNumber);
            console.log(sampleNumber);
            if (sampleNumber == 10) {
              // self.$alert("等于");
              $.ajax({
                url: "http://localhost:8080/samplepaper/randGeneratePaper",
                type: "post",
                dataType: "json",
                contentType: "application/json",
                data: JSON.stringify(self.samplePaper),
                success: function(rs) {
                  if (rs.info == "success") {
                    self.$message("新增成功");
                    // 关闭模态框
                    self.randGenerateVisible = false;
                    self.samplePaper.sampleTitle = null;
                    // 刷新页面
                    self.loadData();
                  }
                  // console.log("success");
                },
                error: function(rs) {
                  console.log("error");
                }
              });
            } else {
              self.$alert("推荐 选择+判断 共10题");
            }
          } else {
            // console.log('error submit!!');
            return false;
          }
        });
      },

      // 加载试卷，并开始计时
      joinExam(index, row) {


        var self = this;
        self.sampleTestId = row.sampleId;
        self.answerSheet.sampleId = row.sampleId;
        self.$confirm('是否开始模拟考试?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          self.onsampleVisible = true;
          // 时钟倒计时
          window.jQuery(function($) {

            $('time').countDown({
              with_separators: false
            })
            $('#dddd').countDown().on('time.elapsed', function() {
              alert(1)
            });
          })
          // 提示
          self.$message({
            type: 'success',
            message: '正在考试'
          });
          // 加载试题
          $.ajax({
            url: "http://localhost:8080/samplepaper/sampleTest",
            type: "get",
            dataType: "json",
            data: {
              "sampleId": row.sampleId
            },
            success: function(rs) {

              self.onSampleList = rs.sample.sampleList
            },
            error: function(rs) {
              console.log("error");
            }
          });
        }).catch(() => {
          self.$message({
            type: 'info',
            message: '已取消'
          });
        });
      },
      // 倒计时
      countDown() {},
      // 单选题
      changeSingleChoice(val, practiceId) {
        let self = this;

        if (self.answerList.length >= 1) {
          for (let i = 0; i < self.answerList.length; i++) {
            if (self.answerList[i].practiceId == practiceId) {
              self.answerList.splice(i, 1);
            }
          }
        }

        let answer = {
          sampleId: 0,
          practiceId: "",
          stuAnswer: "",

        };
        answer.sampleId = self.sampleTestId;
        answer.practiceId = practiceId;
        answer.stuAnswer = val;

        self.answerList.push(answer);


      },
      // 判断题
      changeJudge(val, practiceId) {
        let self = this;
        // 同一题变更答案时删除以前选择的答案
        if (self.answerList.length >= 1) {
          for (let i = 0; i < self.answerList.length; i++) {
            if (self.answerList[i].practiceId == practiceId) {
              self.answerList.splice(i, 1);
            }
          }
        }

        let answer = {
          sampleId: 0,
          practiceId: "",
          stuAnswer: ""
        };

        answer.sampleId = self.sampleTestId;
        answer.practiceId = practiceId;
        answer.stuAnswer = val;

        self.answerList.push(answer);

      },


      sdeletePaper(index, row) {
        // console.log("删除功能"+row.examId);
        var self = this;
        self.$confirm('此操作将删除该试卷, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          $.ajax({
            url: "http://localhost:8080/samplepaper/deletePaper",
            type: "post",
            dataType: "json",
            data: JSON.stringify(row.sampleId),
            contentType: "application/json",
            success: function(rs) {
              if (rs.info == "success") {
                self.$message({
                  type: 'success',
                  message: '删除成功!'
                });
                self.loadData();
              }
            },
            error: function(rs) {
              self.$message({
                type: 'error',
                message: '删除失败!'
              });
            }
          });
        }).catch(() => {
          self.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
      }
    },
    mounted() {
      this.loadData();
    }

  }
</script>

<style>
  #myVideo {
    margin-top: -40px;
    margin-left: 816px;
    position: fixed;
  }

  .el-table .warning-row {
    background: oldlace;
  }

  .el-table .success-row {
    background: #f0f9eb;
  }
</style>
